<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button [text]="''" defaultHref="/tabs/explore"></ion-back-button>
    </ion-buttons>
    <ion-searchbar [formControl]="searchMusic" [placeholder]="'music_search_title' | translate"></ion-searchbar>
  </ion-toolbar>
  <ion-toolbar>
    <ion-segment mode="md" [formControl]="activeSegment">
      <ion-segment-button value="my_music">
        {{'my_music' | translate}}
      </ion-segment-button>
      <ion-segment-button value="recommended">
        {{'recommended' | translate}}
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-down-outline"></ion-refresher-content>
  </ion-refresher>

  <ng-container *ngIf="activeSegment.value === 'my_music'">
    <ion-list-header lines="none">
      <ion-label>Playlists</ion-label>
      <ion-button>Show All</ion-button>
    </ion-list-header>
    <div scrollX="true" style="min-height: 205px;">
      <!-- On playlist loading -->
      <ng-container *ngIf="isLoadingPlaylists">
        <ion-card class="playlist-card scrollX" *ngFor="let item of [1, 2, 3, 4]">
          <ion-skeleton-text animated style="width: 150px;height: 150px;border-radius: 8px;"></ion-skeleton-text>
          <ion-card-content>
            <ion-skeleton-text animated style="width: 80%;border-radius: 8px;"></ion-skeleton-text>
            <ion-skeleton-text animated style="width: 60%;border-radius: 8px;"></ion-skeleton-text>
            <ion-skeleton-text animated style="width: 30%;border-radius: 8px;"></ion-skeleton-text>
          </ion-card-content>
        </ion-card>
      </ng-container>

      <!-- On playlist loaded -->
      <ng-container *ngIf="!isLoadingPlaylists">
        <ion-card class="playlist-card scrollX" *ngFor="let playlist of playlists">
          <ion-skeleton-text animated class="playlist-img-skeleton" *ngIf="!playlist.imgLoaded">
          </ion-skeleton-text>
          <ion-img [src]="playlist.image" class="playlist-img" (ionImgDidLoad)="(playlist.imgLoaded = true)"></ion-img>
          <ion-card-content>
            <p class="album-description">
              <span class="album-name">{{playlist.album}}</span>
              <small class="album-author">{{playlist.author}}</small>
              <small class="album-year">{{playlist.year}}</small>
            </p>
          </ion-card-content>
        </ion-card>
      </ng-container>
    </div>

    <ion-grid>
      <ion-row>
        <ion-col size="6">
          <ion-button expand="block" size="small">
            <ion-icon slot="start" name="play"></ion-icon>
            Play all
          </ion-button>
        </ion-col>
        <ion-col size="6">
          <ion-button expand="block" size="small">
            <ion-icon slot="start" name="shuffle-outline"></ion-icon>
            Shuffle
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>

    <ion-grid>
      <ion-row>
        <ion-col size="12" size-lg="6" size-xl="4" *ngFor="let mu of musics">
          <ion-item button detail="false" lines="none" class="music-item" (click)="playMusic(mu)">
            <ion-skeleton-text slot="start" animated class="music-item-img-skeleton" *ngIf="!mu.imgLoaded">
            </ion-skeleton-text>
            <ion-img slot="start" [src]="mu.image" class="music-item-img" (ionImgDidLoad)="(mu.imgLoaded = true)">
            </ion-img>
            <div slot="start" class="music-playing" *ngIf="music.id === mu.id">
              <ion-fab-button size="small" color="light">
                <ion-icon [name]="music.isPlaying ? 'pause' : 'play'" color="primary"></ion-icon>
              </ion-fab-button>
            </div>

            <ion-label>
              <h2>{{mu.song}}</h2>
              <p>{{mu.author}}</p>
            </ion-label>

            <ion-text slot="end">
              <small>
                {{mu.time}}
              </small>
            </ion-text>

            <ion-buttons slot="end">
              <ion-button color="medium">
                <ion-icon slot="icon-only" md="ellipsis-vertical-outline" ios="ellipsis-horizontal-outline"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ng-container>
</ion-content>